﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo shows how to render selected files in jqxFileUpload.For uploading files, you should set the "uploadUrl" property to point to a Web Server file that will handle the actual Upload proces.</title>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxfileupload.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var imageTypes = ['.gif', '.jpg', '.png'];
            var videoTypes = ['.wmv', '.mov', '.avi', '.divx', '.mpeg', '.mpg', '.m4p'];

            $('#jqxFileUpload').jqxFileUpload({ width: 300, uploadUrl: 'upload.php', fileInputName: 'fileToUpload', renderFiles: function (fileName) {
                var stopIndex = fileName.indexOf('.');
                var name = fileName.slice(0, stopIndex);
                var extension = fileName.slice(stopIndex);
                var iconUrl;

                if (imageTypes.indexOf(extension) !== -1) {
                    iconUrl = '../../images/nav3.png';
                } else if (videoTypes.indexOf(extension) !== -1) {
                    iconUrl = '../../images/movie.png';
                } else {
                    iconUrl = '../../images/nav1.png';
                }
                return '<div><img src="' + iconUrl + '" style="dislplay: inline; width: 16px; height: 16px; margin-right: 5px;" /><span>' + name + '<strong>' + extension + '</strong></span></div>';
            }
            });
        });
    </script>
</head>
<body>
    <div id="jqxFileUpload">
    </div>
</body>
</html>
